<template>
	<div id="public_layoutMainContainer" class="systemDepartmentContainer">
		<!-- 搜索 -->
		<div class="public_searchContainer">
			<el-form ref="searchFormRef" :inline="true" :model="searchForm">
				<el-row :gutter="20">
					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100" label="部门名称">
							<el-input v-model="searchForm.name" placeholder="请输入部门名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item label="部门状态" class="w-100">
							<el-select v-model="searchForm.status" placeholder="请选择部门状态" clearable>
								<el-option label="正常" value="enable" />
								<el-option label="停用" value="disabl" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100 searchOperateFormItem">
							<el-button type="primary" @click="getdepartment">查询</el-button>
							<el-button @click="resetSearchForm">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!-- 操作栏 -->
		<div class="public_operateContainer">
			<el-button type="primary" @click="addDepartment">新增部门</el-button>
		</div>

		<!-- 表格 -->
		<el-table
			class="public_tableContainer"
			v-loading="departmentTableConfig.loading"
			:data="departmentTableConfig.data"
			border
			row-key="_id"
			default-expand-all
		>
			<el-table-column prop="name" label="部门名称" />
			<el-table-column prop="sort" label="排序" width="100" align="center" />
			<el-table-column prop="status" label="状态" width="100" align="center">
				<template #default="{ row }">
					<el-tag v-if="row.status === 'enable'" disable-transitions type="primary">正常</el-tag>
					<el-tag v-if="row.status === 'disable'" disable-transitions type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间">
				<template #default="{ row }">{{ moment(row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="更新时间">
				<template #default="{ row }">{{ moment(row.updatedAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button type="primary" link @click="editDepartment(row)">编辑</el-button>
					<el-button type="primary" link v-if="row.key !== 'root'" @click="removeDepartment(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 删除确认Dialog -->
	<removeConfirmDialog ref="removeConfirmDialogRef" />
	<departmentDialog
		ref="departmentDialogRef"
		:fullDepartmentTree="fullDepartmentTree"
		@upTreeData="getdepartment({ isUpdateFullTree: true })"
	/>
</template>

<script setup name="system_department">
import { ref, reactive, onMounted } from "vue";
import { getDepartmentArrApi, deleteDepartmentApi } from "@/api/system/department";
import moment from "moment";
import removeConfirmDialog from "@/components/confirmDialog/index.vue";
import departmentDialog from "./components/departmentDialog.vue";

// 搜索
const searchFormRef = ref();
const searchForm = ref({ name: undefined, status: undefined });
// 重置
const resetSearchForm = () => {
	searchForm.value = { name: undefined, status: undefined };
	getdepartment({ isUpdateFullTree: true });
};

// 完整的树形数据
const fullDepartmentTree = ref([]);

// 表格
const departmentTableConfig = reactive({
	loading: false,
	data: [],
});
const getdepartment = async ({ isUpdateFullTree = false }) => {
	departmentTableConfig.loading = true;
	try {
		const res = await getDepartmentArrApi({ ...searchForm.value });
		departmentTableConfig.data = res.data;

		if (isUpdateFullTree) fullDepartmentTree.value = res.data;
	} finally {
		departmentTableConfig.loading = false;
	}
};

// 删除数据
const removeConfirmDialogRef = ref();
const removeDepartment = (row) => {
	removeConfirmDialogRef.value.open({
		title: "删除部门",
		content: `删除部门时, 部门下的人员会将系统中删除, 确定删除[${row.name}]吗？`,
		isAsync: true,
		confirm: async ({ stopLoading, done }) => {
			try {
				await deleteDepartmentApi({ id: row._id });
				done();
				getdepartment({ isUpdateFullTree: true });
			} catch (e) {
				stopLoading();
			}
		},
	});
};

// 新增数据
const departmentDialogRef = ref();
const addDepartment = () => {
	departmentDialogRef.value.open();
};

// 编辑数据
const editDepartment = (data) => {
	departmentDialogRef.value.open({ type: "edit", data });
};

onMounted(() => {
	getdepartment({ isUpdateFullTree: true });
});
</script>

<style scoped lang="scss"></style>
